<template>
    <div>
        <div class="container">
            <h1>员工信息</h1>
            <el-divider></el-divider>
            <el-input
                v-model="staff_name"
                placeholder="请输入员工姓名"
                style="width: 220px"
                clearable
                @clear="staff_clear"
                @input="handleSearch()"
            >
                <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>

            <el-button type="primary" @click="editVisible = true" style="margin-left: 75%"
                ><i class="el-icon-s-custom el-icon--left"></i>员工入职<i class="el-icon-plus el-icon--right"></i
            ></el-button>
            <!-- 员工信息列表 -->
            <div style="margin-top: 15px">
                <el-table :data="staffList.slice((currentPage - 1) * pagesize, currentPage * pagesize)" stripe>
                    <el-table-column type="index" label="序号" width="50"></el-table-column>
                    <el-table-column label="员工编号" prop="staff_number"></el-table-column>
                    <el-table-column label="员工姓名" prop="staff_name">
                        <template slot-scope="scope">
                            <el-tag v-if="scope.row.staff_name == null" type="info">暂无</el-tag>
                             <el-tag v-if="scope.row.staff_name != null" type="primary">{{scope.row.staff_name}}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="员工电话号" prop="staff_phone"> 
                          <template slot-scope="scope">
                            <el-tag v-if="scope.row.staff_phone == null" type="info">暂无</el-tag>
                             <el-tag v-if="scope.row.staff_phone != null" type="primary">{{scope.row.staff_phone}}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="性别" prop="staff_sex"> 
                           <template slot-scope="scope">
                            <el-tag v-if="scope.row.staff_sex == null" type="info">暂无</el-tag>
                             <el-tag v-if="scope.row.staff_sex != null" type="primary">{{scope.row.staff_sex}}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="职位" prop="staff_status"></el-table-column>
                    <el-table-column fixed="right" label="操作" width="200">
                        <template slot-scope="scope">
                            <el-button @click="handleClick(scope.row)" type="text" size="small">调整职务</el-button>
                            <el-button @click="updatePwd(scope.row)" type="text" size="small">重置密码</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页 -->
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 15, 30, 45, 60, 75]"
                    :page-size="5"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="length"
                    style="margin-left: 35%;  margin-top: 20px"
                ></el-pagination>
            </div>
        </div>
        <el-dialog title="修改信息" center :visible.sync="dialog" width="30%">
            <el-form :rules="ruleForm" :model="staff" ref="staff" label-width="80px">
                <el-form-item label="员工职位">
                    <el-select v-model="staff.staff_status" placeholder="请选择活动员工职务">
                        <el-option label="店员" value="店员"></el-option>
                        <el-option label="快递员" value="快递员"></el-option>
                    </el-select>
                </el-form-item>
                <el-button type="text" @click="updateStaff()">确认</el-button>
            </el-form>
        </el-dialog>

        <template>
            <el-dialog title="员工入职" @close="dialog_close" :visible.sync="editVisible" width="30%">
                <el-form :model="StaffList" :rules="ruleForm" ref="StaffList" label-width="100px" status-icon>
                    <el-form-item label="员工账号" prop="staff_number">
                        <el-input
                            v-model="StaffList.staff_number"
                            placeholder="请输入以汉字英文组成的员工账号"
                            type="text"
                            maxlength="10"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="staff_password">
                        <el-input
                            v-model="StaffList.staff_password"
                            placeholder="初始密码为:123456"
                            type="password"
                            show-password
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="职务" prop="staff_status">
                        <el-select v-model="StaffList.staff_status" placeholder="请选择活动员工职务">
                            <el-option label="店员" value="店员"></el-option>
                            <el-option label="快递员" value="快递员"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="editVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addStaff">确 定</el-button>
                </span>
            </el-dialog>
        </template>
    </div>
</template>
<script>
export default {
    name: 'Staff',
    data() {
        let validateNumber = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('员工账号不能为空'));
            }
            const validateNumber = /^[zA-Z0-9]{6,10}$/;
            if (validateNumber.test(value)) {
                let param = new URLSearchParams();
                param.append('staff_number', this.StaffList.staff_number);
                this.$axios({
                    method: 'post',
                    url: 'staff/queryName',
                    data: param,
                    headers: { 'Content-Type': 'application/x-www-form-urlencoded' } //加上这个
                }).then((res) => {
                    if (res.data.code == 1) {
                        return callback(new Error('该账号已存在'));
                    } else {
                        return callback();
                    }
                });
            } else {
                return callback(new Error('员工账号必须为数字与英文长度为6-10'));
            }
        };
        let validatePwd = (rule, value, callback) => {
            if (value != 111111) {
                return callback(new Error('初始密码必须为111111'));
            } else {
                return callback();
            }
        };
        return {
            StaffList: {
                staff_number: '',
                staff_password: '',
                staff_name: '',
                staff_phone: '',
                staff_status: '',
                staff_sex: ''
            },
            ruleForm: {
                staff_number: [{ required: true, validator: validateNumber, trigger: 'blur' }],
                staff_password: [{ required: true, validator: validatePwd, trigger: 'blur' }]
            },
            //总数
            length: 0, //初始页
            currentPage: 1, //初始页大小
            pagesize: 5,
            staffList: [
                {
                    staff_id: '',
                    staff_number: '', //员工账号
                    staff_password: '', //员工账号密码
                    staff_name: '', //员工姓名
                    staff_phone: '', //员工手机号
                    staff_status: '', //员工身份
                    staff_sex: '', //性别
                    address: '' //地址
                }
            ],
            staff: {
                staff_number: '',
                staff_phone: '',
                staff_status: ''
            },
            editVisible: false,
            dialog: false,
            staff_name: '',
            ruleForm: {}
        };
    },
    methods: {
        staff_clear() {
            this.getData();
        },
        add_staff() {
            this.editVisible = true;
        },
        addStaff() {
            this.$refs['StaffList'].validate((valid) => {
                if (valid) {
                    this.$axios({
                        method: 'post',
                        url: 'staff/registers',
                        data: JSON.stringify(this.StaffList),
                        headers: { 'Content-Type': 'application/json' }
                    }).then((res) => {
                        if (res.data.code == 1) {
                            this.$message.success('入职成功！');
                        } else {
                            this.$message.info(res.data.mess);
                        }
                    });
                } else {
                    return false;
                }
            });
        },
        dialog_close() {
            this.$router.go(0);
        },
        getData() {
            this.$axios({
                method: 'get',
                url: 'staff/query-all',
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
            }).then((res) => {
                if (res.data.code == 1) {
                    this.staffList = res.data.result;
                    this.length = this.staffList.length;
                }
            });
        },
        handleClick(row) {
            this.dialog = true;
            this.staff.staff_number = row.staff_number;
            this.staff.staff_status = row.staff_status;
        },
        updateStaff() {
            this.$refs['staff'].validate((valid) => {
                if (valid) {
                    this.$axios({
                        method: 'put',
                        url: 'staff/update',
                        data: JSON.stringify(this.staff),
                        headers: { 'Content-Type': 'application/json' } //加上这个
                    })
                        .then((res) => {
                            if (res.data.code == 1) {
                                this.dialog = false;
                                this.$message.success(res.data.mess);
                                this.$router.go(0);
                            } else {
                                this.$message.info(res.data.mess);
                            }
                        })
                        .catch((error) => {
                            this.$message.error('出错了');
                        });
                } else {
                    return false;
                }
            });
        },
        updatePwd(row) {
            let param = new URLSearchParams();
            param.append('staff_number', row.staff_number);
            param.append('staff_password', '123456');
            this.$axios({
                method: 'put',
                url: 'staff/reset',
                data: param,
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
            }).then((res) => {
                if (res.data.code == 1) {
                    // this.$message.success("修改成功,初始密码'123456'");
                     this.$notify.success({
                            title: '消息提示',
                            message: "密码重置成功,初始密码为'123456'"
                        });
                } else {
                    this.$message.error('修改失败');
                }
            });
        },
        handleSearch() {
            let param = new URLSearchParams();
            param.append('staff_name', this.staff_name);
            this.$axios({
                method: 'post',
                url: 'staff/queryByStaffName',
                data: param,
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
            }).then((res) => {
                if (res.data.code == 1) {
                    this.staffList = res.data.data;
                } else {
                    this.$message.error('没有该员工！');
                }
            });
        }, // 当前页大小
        handleSizeChange(val) {
            this.pagesize = val;
        }, // 当前页
        handleCurrentChange(val) {
            this.currentPage = val;
        }
    },
    created() {
        this.getData();
    }
};
</script>
<style>
</style>